<script setup lang="ts">
import { useMemberStore } from '@/stores'
import { PageSkip, Toast } from '@/utils/tools'
import { ref } from 'vue'
const activeIndex = ref(0)
const memberStore = useMemberStore()
// 获取轮播图的下标
const onChange: UniHelper.SwiperOnChange = (ev) => {
  // console.log(ev)
  activeIndex.value = ev.detail.current
}
const emits = defineEmits<{
  (event: 'goToLogin'): void
}>()
const props = defineProps<{ flag?: boolean; list?: any[]; borderRradius?: boolean }>()
// console.log(props.list)

/** 点击轮播图跳转 */
const cilckBannerSkip = (item: any) => {
  console.log('点击轮播图跳转', item)
  if (!memberStore.token) return emits('goToLogin')
  if (!item.url) return

  // 状态1进行中0删除2失效3已过期4待开始
  if (item.marketingStatus === 4) {
    return Toast('活动还未开始')
  } else if (
    item.marketingStatus === 3 ||
    item.marketingStatus === 2 ||
    item.marketingStatus === 0
  ) {
    return Toast('活动已失效')
  }
  const newUrl = item.marketingId ? `${item.url}?marketingId=${item.marketingId}` : item.ur
  const pageList = ['/pages/index/index', '/pages/eat/eat', '/pages/goods/goods', '/pages/my/my']
  const isSkipType = pageList.some((ev) => ev === item.url)
  isSkipType ? PageSkip(newUrl, 'switchTab') : PageSkip(newUrl)
}
</script>

<template>
  <view class="carousel" :class="{ borderRradius: props.borderRradius }">
    <swiper :circular="true" :autoplay="true" :interval="3000" @change="onChange">
      <swiper-item v-for="item in props.list" :key="item.resourceUrl">
        <view @tap="cilckBannerSkip(item)" hover-class="none" class="_navigator">
          <image :mode="item.mode || 'scaleToFill'" class="_image" :src="item.resourceUrl"></image>
        </view>
      </swiper-item>
    </swiper>
    <!-- 指示点 -->
    <view class="indicator" v-if="props.flag">
      <text
        v-for="(item, index) in props.list"
        :key="item.resourceUrl"
        class="dot"
        :class="{ active: index === activeIndex }"
      ></text>
    </view>
  </view>
</template>

<style lang="scss">
/* 轮播图 */
.carousel {
  height: 100%;
  position: relative;
  overflow: hidden;
  transform: translateY(0);
  background-color: #efefef;
  .indicator {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 25rpx;
    display: flex;
    justify-content: center;

    .dot {
      width: 30rpx;
      height: 6rpx;
      margin: 0 8rpx;
      border-radius: 6rpx;
      background-color: rgba(255, 255, 255, 0.4);
    }
    .active {
      background-color: #fff;
    }
  }
  ._navigator,
  ._image {
    width: 100%;
    height: 100%;
  }
}
.borderRradius {
  border-radius: 24rpx;
}
</style>
